<!DOCTYPE html>
<!--
%%LICENSE%%
Version: %%VERSION%%
-->
<html>
<head>
    <link rel="shortcut icon" type="image/png"
        href="../images/crowdlogger-logo.001.16x16.png"/>
    <title>%%PROJECT_NAME%% App Builder</title>
    <link rel="stylesheet" type="text/css" media="screen" 
        href="../style/style.css">
    <link rel="stylesheet" type="text/css" media="screen" 
        href="../style/app-builder.css">
    <script src="../lib/jquery.min.js"></script>
    <script src="../lib/tinymce/js/tinymce/tinymce.min.js"></script>
    <script src="../lib/codemirror-3.20/lib/codemirror.js"></script>
    <link rel="stylesheet" href="../lib/codemirror-3.20/lib/codemirror.css">
    <script src="../lib/codemirror-3.20/mode/javascript/javascript.js"></script>
    <script src="../lib/codemirror-3.20/mode/xml/xml.js"></script>
    <script src="../lib/codemirror-3.20/mode/css/css.js"></script>
    <script>
        var appBuilder;
    </script>
    <script src="app-builder.js"></script>
</head>
<body>
<div class="bodyWrapper">

    <!-- The header. -->
    <div class="header">
        <div class="title">
            <span class="logo-version">version %%VERSION%%</span>
            <img class="logo" src="../images/crowdlogger-logo.002.png"/>
            <span class="titleMain">App Builder</span><br>
        </div>

        <div id="iframe" class="menu-frame">
           <iframe src="../menu.html" marginheight="0" width="100%" 
           frameborder="0" scrolling="no" height="70px">
           </iframe>
        </div>
        <div id="share-iframe" class="share-iframe">
           <iframe src="../share.html" marginheight="0" width="100%" 
           frameborder="0" scrolling="no" height="80px">
           </iframe>
        </div>

    </div>

    <!-- Brings us down to just below the title. -->
    <div style="clear: both;"></div>
    <div class="headerBuffer"></div>


<h2>Overview</h2>

<p>
Welcome to the %%PROJECT_NAME%% App Builder!
</p>

<h3>What is the App Builder?</h3>
<p>
The App Builder is a set of tools that assist you in creating study and tool apps that can be installed by %%PROJECT_NAME%%.  There are two steps:
</p>

<ol>
    <li>create an app from scratch or modify an existing one</li>
    <li>deploy the app</li>
</ol>

<h3>Once I build an app, how do I deploy it?</h3>
<p>
You have two choices:
</p>

<ol>
    <li>apply to have your completed app hosted on the %%PROJECT_NAME%% 
        repository (which is seen by all users of %%PROJECT_NAME%%)</li>
    
    <li>create your very own repository on a private server and distribute the 
        web address of your repository to perspective users/participants</li>
</ol>

<p>
Further instructions can be found during the building process, or from our
<a href="hosting.html">App Hosting Submission page</a>.
</p>

<h2>Building an app</h2>

<div class="app-input">
Load existing app package (.json): <input id="app-upload" type="file"/>
</div>

<div class="app-input">
    <h3>Metadata</h3>
    <form>
    <table>
        <tr>
            <td>App id:</td>
            <td><input name="clrmid" type="text"/></td>
        </tr><tr>
            <td>App name:</td>
            <td><input name="name" type="text"/></td>
        </tr><tr>
            <td>Version:</td>
            <td><input name="version" type="text"/></td>
        </tr><tr>
            <td>App type:</td><td>
                <input type="checkbox" name="categories" 
                    value="app"/>Tool <br/>
                <input type="checkbox" name="categories" 
                    value="study"/>Study
            </td>
        </tr><tr>
            <td>Description:</td>
            <td><textarea id="description"></textarea></td>
        </tr><tr>
            <td>Package URL:</td>
            <td><input name="packageURL" type="text"/></td>
        </tr><tr>
            <td>Logo URL:</td><td><input name="logoURL" type="text"/></td>
        </tr><tr>
            <td>Minimum %%PROJECT_NAME%% version<br/>
            (current version: %%VERSION%%):</td>
            <td><input name="minCLVersion" type="text"/></td>
        </tr><tr>
            <td>Permissions:</td>
            <td>
                <input type="checkbox" name="permissions" 
                    value="userdata"/>Access user data<br/>
                <input type="checkbox" name="permissions" 
                    value="globaldata"/>Access global data/Initiate global 
                        collection<br/>
                <input type="checkbox" name="permissions" 
                    value="storage"/>Store data locally<br/>
                <input type="checkbox" name="permissions" 
                    value="servercollection"/>Collect data on on or more servers<br/>
                <input type="checkbox" name="permissions" 
                    value="servercomputation"/>Use servers to process data (no storage)<br/>
                <input type="checkbox" name="permissions" 
                    value="pagemanipulation"/>Manipulate web pages
            </td>
        </tr>
    </table>
    </form>
</div>


<div class="file-editor">
    <h3>File editor</h3>
    <!-- List what files/resources they currently have. -->
    <div class="files">
        <h4>Core</h4>
        <div class="category" data-type="module">
            <span class="file module"><span class="name">module.js</span></span>
        </div>

        <div class="category" data-type="html">
            <h4>
                HTML files
                <button class="cl-button add"><sup>+</sup></button>
            </h4>
        </span>

        </div>

        <div class="category" data-type="js">
            <h4>
                JavaScript files 
                <button class="cl-button add"><sup>+</sup></button>
            </h4>
        </div>
        
        <div class="category" data-type="css">
            <h4>
                CSS files
                <button class="cl-button add"><sup>+</sup></button>
            </h4>
        </div>

        <div class="hidden file" id="file-template">
            <span class="remove-button-container">
                    &nbsp;
                    <button class="cl-button remove confirm hidden"
                        ><sup>&times;</sup></button>
            </span>
            <span class="name"></span>
        </div>
    </div>

    <div class="editors">
        <div class="editor-container hidden">
            <textarea class="editor js-editor"></textarea>
        </div>

        <div class="editor-container hidden">
            <textarea class="editor css-editor"></textarea>
        </div>

        <div class="editor-container hidden">
            <textarea class="editor html-editor"></textarea>
        </div>
    </div>
</div>

<button id="export" class="cl-button">Export</button>


<!-- Everything below here is for the footer. -->
<div class="buffer">
</div>

<div class="copyright-frame">
   <iframe width="100%" src="../copyright.html" scrolling=no 
           frameborder=0 marginheight=0 height=40px>
   </iframe>
</div>

</div>

<div class="emptyFooter">
</div>

</body>
</html>